<!--  -->
<template>
  <div class="login">
    <p class="title">叩丁狼商品管理系统</p>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      class="demo-ruleForm"
    >
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input v-model="ruleForm.pwd" type="password" autocomplete="off" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="LoginFn()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from "element-plus";
import type { Ref } from "vue";
import { reactive, ref } from "vue";

import { umsAdmin } from "../../request/http";
// import * as http from "../../request/http";

import { useAdminStore } from "../../store/modules/admin";
import { useRouter,useRoute } from "vue-router";

const router = useRouter();

const adminStore = useAdminStore();

const ruleFormRef = ref() as Ref<FormInstance>;

const ruleForm = reactive({
  username: "mowu",
  pwd: "123456",
});

const rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: ["blur"] },
    { validator: valiUsername, trigger: "blur" },
  ],
  pwd: [
    { required: true, message: "请输入密码", trigger: ["blur"] },
    { validator: valiPwd, trigger: "blur" },
  ],
});
// 校验账号的函数
function valiUsername(
  rule: unknown,
  value: string | undefined,
  cb: (msg?: string) => void
) {
  if (value && value.length > 3) {
    cb();
  } else {
    cb("用户名不能少于3个字符");
  }
}
// 校验密码的函数
function valiPwd(
  rule: unknown,
  value: string | undefined,
  cb: (msg?: string) => void
) {
  if (value && value.length >= 6) {
    cb();
  } else {
    cb("密码不能少于6个字符");
  }
}

// 点击登录按钮触发：三种写法
// function LoginFn() {
//     // --------1callback-----------
//     // ruleFormRef.value.validate((isVal:boolean)=>{
//     //     console.log(isVal);
//     // })

//     // --------2promise-----------
//     ruleFormRef.value.validate().then(()=>{
//         console.log("then");
//     })
//     .catch(()=>{
//         console.log("catch");
//     })
// }
// ----3async----await----------------
async function LoginFn() {
  try {
    await ruleFormRef.value.validate();
    // console.log("try");
    const loginData = await umsAdmin.adminLogin({
      username: ruleForm.username,
      password: ruleForm.pwd,
    });
    // code的类型
    if(loginData.code === 200){
        const { tokenHead,token } = loginData.data;
        // 存储token
        localStorage.setItem("token",tokenHead + token);

        //获取用户信息
        // const adminInfo =  await http.getAdminInfo(); 
        // if(adminInfo.code === 200){
        //     adminStore.updateMenus(adminInfo.data.menus);
        //     router.push("/homepage");
        // }
        // 直接跳转到首页 
        // router.push("/homepage");
        // ===>>>改为index
        router.push("/index");
    }
  } catch (e) {
    console.log("catch");
  }
}
</script>
<style lang="less" scoped>
  
  .login{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    height: 300px;
    border: 1px solid #fff;
    margin: 100px auto;
    border-radius: 20px;
  }
.title{
    font-size: 26px;
    color: #fff;
}
.el-button{
    width: 234px;
}
</style>
